<template>

    <el-container>

        <!--头部区域-->
        <el-header>
            <div class="logoContainer">
<!--                <img src="../assets/logo.png">-->
                <span>WebRobot | 自动化测试平台</span>
            </div>
            <div class="headerLeftContainer">
                <span>欢迎您： {{this.user.name}}&nbsp;&nbsp;</span>
                <el-button type="info" @click="logout">退出</el-button>
            </div>

        </el-header>

        <!--页面主体区域-->
        <el-container>
            <!--侧边栏-->
            <el-aside :width="this.collapseFlag ? '64px':'180px'">
                <div class="collapseSwitch" @click="collapseSidebar" >|||</div>
                <!--菜单栏-->
                <el-menu
                        :default-active="defaultIndex"
                        router
                        :collapse-transition="false"
                        background-color="#333744"
                        text-color="#ffffff"
                        active-text-color="#409EFF"
                        unique-opened
                        :collapse="collapseFlag">

                    <!--一级菜单栏-->
                    <el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id">

                        <!--菜单栏模板-->
                        <template slot="title">
                            <i :class="item.icon"></i>
                            <span>{{item.name}}</span>
                        </template>

                        <!--二级菜单栏-->
                        <el-menu-item :index="'/'+subItem.path" v-for="subItem in item.childrens"
                                      class="menuItemClass"
                                      @click="saveDefaultActiveItem('/'+subItem.path)"
                                      :key="subItem.id">
                            <template slot="title">
                                <i :class="subItem.icon"></i>
                                <span>{{subItem.name}}</span>
                            </template>
                        </el-menu-item>

                    </el-submenu>


                </el-menu>

            </el-aside>

            <!--右侧内容主体-->
            <el-main>
                <router-view></router-view>
            </el-main>

        </el-container>

    </el-container>
</template>

<script>

    export default {
        data(){
          return {
                /*左侧菜单数据*/
              menuList:[],
              collapseFlag : false,
              user:JSON.parse(window.sessionStorage.getItem('user')),
              defaultIndex:window.sessionStorage.getItem("defaultIndex")
            }


        },
        created() {
            this.getUserMenus();
        },


        name: "Home",
        methods:{

            logout(){
                window.sessionStorage.clear();

                this.$router.push('/login');
            },

            /*获取所有的菜单*/
            async getUserMenus(){
                const {data:res} = await this.$http.post('menu/getUserMenus',this.user);
                if(res.status !== 200){
                    return this.$message.error('获取菜单失败')
                }
                this.menuList = res.data;
            },

            collapseSidebar(){
               this.collapseFlag =  !this.collapseFlag;
            },

            /*点击菜单项时保存激活的index到本地*/
            saveDefaultActiveItem(path){
                window.sessionStorage.setItem("defaultIndex",path);

            }

        }
    }
</script>

<style lang="less" scoped>

    .el-header{
        background-color: #666666;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 10px;
        color: #eeeeee;

        .logoContainer{
            display: flex;
            height: 100%;
            align-items: center;

            img{
                height:100%;
            }

            span{
                margin-left: 15px;
            }
        }
    }
    .el-aside{
        background-color: #333744;

        .el-menu{
            border-right: 0px;
        }
    }

    .el-container{
        height: 100%;
        width: 100%;

    }
    .collapseSwitch{
        color: #eeeeee;
        text-align: center;
        letter-spacing: 0.2em;
        cursor: pointer;
    }

    .el-menu-item{
        min-width: 160px !important;
    }

</style>